<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper class="home-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular
			indicator-color="orange">
			<swiper-item class="banner-item" v-for="(balist,index) in bannerlist" :key="balist.src">
				<img :src="balist.src" alt="" class="banner-img">
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="home-nav">
			<view class="nav-item" v-for="hos in hostlist" :key="hos.src">
				<img :src="hos.src" alt="" class="nav-img">
				<text class="nav-text">{{hos.name}}</text>
			</view>
		</view>
		<div class="home-course">
			<vue-Card title="热门课程" more="全部课程>" type="course">
				<view class="course-list">
					<vue-Card-item v-for="course in courseList" :item="course" :key="course.id"
						type="course"></vue-Card-item>
				</view>
			</vue-Card>
			<vue-Card title="名咖大师" more="全部老师>" type="teacher">
				<view class="course-list">
					<vue-Card-item v-for="teacher in teacherList" :key="teacher.id" :item="teacher"
						type="teacher"></vue-Card-item>
				</view>
			</vue-Card>
		</div>
		<vue-Card-top></vue-Card-top>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from 'vue'
	import { onLoad,onPageScroll } from '@dcloudio/uni-app';
	export default defineComponent({
		name: 'Home'
	})
</script>
<script setup lang="ts">
	import { hotCateList, bannerCateList, courseList } from '../../../common/mock/home'
	import HomeApi from '../../../../my-uniapp/src/Api/Home'
	import { ref, reactive } from 'vue'
	const isShow = ref(true)
	const bannerlist = ref(bannerCateList)
	const hostlist = ref(hotCateList)
	// import {onLoad} from '@dcloudio/uni-app'
	const courseList = ref([])
	const teacherList = ref([])

	//页面滚动是触发的事件
	onPageScroll((e)=>{
		// console.log(e)
		// 页面滚动是调用自定义事件 把滚动的高度传给自定义函数
		uni.$emit('pageScroll',e.scrollTop)
	})

	//发请求 拿对应的课程列表和老师列表
	const getIndexdata = async () => {
		const result = await HomeApi.getHomeData()
		if (result.code === 200) {
			console.log(result.data)
			courseList.value = result.data.courseList
			teacherList.value = result.data.teacherList
		}
	}
	onLoad(() => {
		getIndexdata()
	})
</script>


<style lang="less">
	.back-top{
		width:10upx
	}
	.home {
		.home-banner {
			width: 100%;
			height: 330upx;

			.banner-img {
				width: 100%;
				height: 100%;
			}
		}

		.home-nav {
			margin: 20upx 0upx;
			display: flex;
			justify-content: space-around;

			.nav-item {
				display: flex;
				font-size: 28upx;

				flex-direction: column;
				align-items: center;
				width: 20%;
				color: #666;

				.nav-img {
					width: 100upx;
					height: 100upx;
				}
			}
		}

		.home-course {
			.course-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				&:after {
					content: '';
					width: 335upx;
				}
			}
		}
		
	}
</style>